<template>
  <f7-page>
    <qm-currentcy-navbar title="资讯首页">
    </qm-currentcy-navbar>
    <template slot="fixed">
      <qm-toolbar></qm-toolbar>
    </template>
    <div class="information-header">
      <qm-classification :tabOptions="informationOpt"></qm-classification>
    </div>
    <f7-block class="classify-wrapper">
      <div class="classify-box">
        <div
          class="classify-cell"
          :class="activeClassify === i ? 'acitve-classify-cell' : ''"
          v-for="(text, i) in classifys"
          :key="i"
          @click="onSelect(i)"
        >{{text}}</div>
      </div>
    </f7-block>
    <f7-block class="consult-wrapper">
      <qm-consult-list v-for="(item, i) in consults" :key="i" :data="item"></qm-consult-list>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  name: "information-index",
  data() {
    return {
      informationOpt: ["生活播报", "今日动态", "企业动态", "部门/小组动态", "生活播报", "今日动态", "企业动态", "部门/小组动态"],
      classifys: ["推荐", "最新", "最热", "评论", "点赞", "推荐", "最新", "最热", "评论", "点赞"],
      activeClassify: 0,
      consults: [
        { title: "新时代机关新风采", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "疫情防控不放松 个人防护第一位 进一步做好预防", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "天津市滨海新区13项指标成为全国标杆", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") },
        { title: "杭州出台全国首个省会城市不动产登记地方政府规章杭州出台全国首个省会城市", time: "2022-03-16  12:00", image: require("/static/img/list/pic-xiangmu1.png") }
      ]
    }
  },
  methods: {
    onSelect(i) {
      if (this.activeClassify === i) return;
      this.activeClassify = i;
    }
  }
}
</script>

<style lang="less" scoped>
.information-header {
  box-shadow: 0 calc(5px * var(--ratio)) calc(8px * var(--ratio)) 0 rgba(0, 0, 0, 0.03);
}
.classify-wrapper {
  margin: 0;
  padding: calc(40px * var(--ratio)) calc(32px * var(--ratio)) 0;

  .classify-box {
    overflow-x: auto;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .classify-cell {
    margin-right: calc(24px * var(--ratio));
    display: inline-block;
    width: calc(112px * var(--ratio));
    height: calc(54px * var(--ratio));
    color: var(--color-text-title);
    font-size: var(--font-size-subcontent-2);
    text-align: center;
    line-height: calc(54px * var(--ratio));
    background: var(--color-fill-background);
    border-radius: calc(32px * var(--ratio));

    &:last-child {
      margin-right: 0;
    }
  }

  .acitve-classify-cell {
    color: #fff;
    background-color: var(--color-brand);
  }
}

.consult-wrapper {
  margin: 0;
  padding: 0 calc(32px * var(--ratio));
}

::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>